/*
  学习目标：setState 的 更新原理 - 浅比较-比较的是内存地址
  错误示范
  1. 为什么不能直接修改 this.state.count = 100
  因为this.state是一个对象，直接修改属性值，地址没有改变过
  2. this.state.list.push(4)
  因为this.state.list是一个数组，地址没有改变过

  正确示范:
  this.setState(新的对象)
  因为新的对象，内存地址已经改变了，所以 页面就会更新
*/

import React from 'react';
export default class App extends React.Component {
  state = {
    count: 0,
    msg: 'app',
  };

  render() {
    return (
      <div>
        <h1>数量： {this.state.count}</h1>
        <h1>msg: {this.state.msg}</h1>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          点我修改数量
        </button>
        <button onClick={() => this.setState({ msg: this.state.msg + '~' })}>
          点我修改msg
        </button>

        <Son count={this.state.count}></Son>
        <Child></Child>
      </div>
    );
  }
}

// 使用纯组件后，app上更新 msg，就不会引起Son组件也更新了
// 更新msg： 旧prop {count:0}  新prop {count:0}
class Son extends React.PureComponent {
  render() {
    console.log('我是Son，我render了 -----> ');
    return <div>我是Son - {this.props.count}</div>;
  }
}
// class Son extends React.Component {
//   shouldComponentUpdate(nextProps) {
//     console.log('nextProps -----> ', nextProps);
//     // 判断新的值 和 旧的值，如果相等，那就没必要更新，所以返回 false
//     // 如果有多个属性，那么每一个都要去判断是否改变，太麻烦
//     if (
//       nextProps.count === this.props.count &&
//       nextProps.msg === this.props.msg
//     ) {
//       return false;
//     } else {
//       return true;
//     }
//   }
//   render() {
//     console.log('我是Son，我render了 -----> ');
//     return <div>我是Son - {this.props.count}</div>;
//   }
// }

// props的值对页面没影响，建议直接 shouldComponentUpdate 返回false，省去纯组件的判断
class Child extends React.Component {
  state = { msg: 'child' };
  shouldComponentUpdate() {
    return false;
  }
  render() {
    console.log('我是Child，我render了 -----> ');
    return <div>我是Child</div>;
  }
}
